<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="keys">
    <div class="key">
      <div>A</div>
      <span class="sound">clap</span>
    </div>
    <div class="key">
      <div>S</div>
      <span class="sound">hihat</span>
    </div>
    <div class="key">
      <div>D</div>
      <span class="sound">kick</span>
    </div>
    <div class="key">
      <div>F</div>
      <span class="sound">openhat</span>
    </div>
    <div class="key">
      <div>G</div>
      <span class="sound">boom</span>
    </div>
    <div class="key">
      <div>H</div>
      <span class="sound">ride</span>
    </div>
    <div class="key">
      <div>J</div>
      <span class="sound">snare</span>
    </div>
    <div class="key">
      <div>K</div>
      <span class="sound">tom</span>
    </div>
    <div class="key">
      <div>L</div>
      <span class="sound">tink</span>
    </div>
  </div>

  <audio data-key="65" src="./sounds/clap.wav"></audio>
  <audio data-key="83" src="./sounds/hihat.wav"></audio>
  <audio data-key="68" src="./sounds/kick.wav"></audio>
  <audio data-key="70" src="./sounds/openhat.wav"></audio>
  <audio data-key="71" src="./sounds/boom.wav"></audio>
  <audio data-key="72" src="./sounds/ride.wav"></audio>
  <audio data-key="74" src="./sounds/snare.wav"></audio>
  <audio data-key="75" src="./sounds/tom.wav"></audio>
  <audio data-key="76" src="./sounds/tink.wav"></audio>


  <script>
    function playSound(e) {
      // console.log(e.keyCode);
      // 判断用户输入的值，找到对应的data-key，让该 auido 播放
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
      if (!audio) return;
      // 确保是从 0 开始播放的
      audio.currentTime = 0;

      audio.play()
    }


    // 监听用户键盘敲击事件
    window.addEventListener('keydown', playSound)
    // 键盘对应音频

  </script>
</body>
</html>